<template>
    <div class="container">
        <div v-if="loading" class="global-loading">
            <div class="loading-spinner"></div>
            <p class="loading-text">加载中...</p>
        </div>
        <div v-else>
            <div class="bg-layer"></div>
            <HeaderBar v-if="dashboardData" />
            <MainContent v-if="dashboardData" :dashboardData="dashboardData" />
            <div class="image-container">
                <div class="rot-layer rot1"></div>
                <div class="rot-layer rot2"></div>
                <div class="static-layer rot3"></div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import dashboardAPI from '@/api/dashboard.js';
import HeaderBar from '@/components/Dashboard/HeaderBar.vue';
import MainContent from '@/components/Dashboard/MainContent.vue';
import { errorNotify } from '@/utils/Misc';
const dashboardData = ref(null);
const loading = ref(true);
const fetchDashboardData = async () => {
    try {
        loading.value = true;
        const response = await dashboardAPI.getDashboardData();
        if (response.data && response.data.ZxDashboard) {
            dashboardData.value = response.data.ZxDashboard;
        } else {
            throw new Error('获取的数据格式不正确');
        }
    } catch (error) {
        errorNotify("Dashboard.vue", "fetchDashboardData", error);
        dashboardData.value = null;
    } finally {
        loading.value = false;
    }
};
onMounted(() => {
    dashboardData.value = {
        "finishNum": 26,
        "unfinishNum": 6,
        "waitNum": 2,
        "planTypeNumList": [
            {
                "type": 1,
                "num": 9
            },
            {
                "type": 2,
                "num": 12
            },
            {
                "type": 3,
                "num": 5
            }
        ],
        "planBoardViewList": [
            {
                "name": "变送器核对检查",
                "status": 2
            },
            {
                "name": "所内防尘排查",
                "status": 1
            },
            {
                "name": "直流设备接线情况核对",
                "status": 3
            },
            {
                "name": "1500V小车专项",
                "status": 2
            },
            {
                "name": "框架绝缘测试",
                "status": 1
            },
            {
                "name": "光纤专项",
                "status": 3
            },
            {
                "name": "所内电缆排查",
                "status": 2
            },
            {
                "name": "设备上方风口排查专项",
                "status": 1
            },
            {
                "name": "接地极及接地母排清单",
                "status": 3
            },
            {
                "name": "轨行区专项排查",
                "status": 2
            },
            {
                "name": "电缆路径收集",
                "status": 1
            },
            {
                "name": "环网电缆排查专项",
                "status": 3
            },
            {
                "name": "过轨电缆排查",
                "status": 2
            },
            {
                "name": "交直流屏空开核对",
                "status": 1
            },
            {
                "name": "1500柜门卡滞专项",
                "status": 3
            },
            {
                "name": "蓄电池充放电试验",
                "status": 2
            },
            {
                "name": "设备房渗漏水排查",
                "status": 1
            },
            {
                "name": "400V螺栓紧固专项",
                "status": 3
            },
            {
                "name": "有限空间排查",
                "status": 2
            },
            {
                "name": "设备房孔洞排查",
                "status": 1
            },
            {
                "name": "牵引所框架绝缘提升排查",
                "status": 3
            },
            {
                "name": "直流电缆专项检查",
                "status": 2
            },
            {
                "name": "35kV开关柜气压表排查",
                "status": 1
            },
            {
                "name": "设备标识、后台界面一致性排查",
                "status": 3
            },
            {
                "name": "设备房环境检查",
                "status": 2
            },
            {
                "name": "新线环境排查记录",
                "status": 1
            }
        ],
        "taskDailyList": [
            {
                "localDate": "2025.8.15",
                "number": 3
            },
            {
                "localDate": "2025.8.16",
                "number": 2
            },
            {
                "localDate": "2025.8.17",
                "number": 1
            },
            {
                "localDate": "2025.8.18",
                "number": 3
            },
            {
                "localDate": "2025.8.19",
                "number": 4
            },
            {
                "localDate": "2025.8.20",
                "number": 2
            },
            {
                "localDate": "2025.8.21",
                "number": 1
            },
            {
                "localDate": "2025.8.22",
                "number": 3
            },
            {
                "localDate": "2025.8.23",
                "number": 4
            },
            {
                "localDate": "2025.8.24",
                "number": 1
            },
            {
                "localDate": "2025.8.25",
                "number": 2
            },
            {
                "localDate": "2025.8.26",
                "number": 3
            },
            {
                "localDate": "2025.8.27",
                "number": 1
            },
            {
                "localDate": "2025.8.28",
                "number": 4
            },
            {
                "localDate": "2025.8.29",
                "number": 2
            }
        ],
        "planNearList": [
            {
                "id": "daba5d40-e63b-49a6-9ec0-b7d2fc51cdd0",
                "name": "有限空间排查",
                "startAt": "2025-08-01",
                "endAt": "2025-08-27",
                "taskNearList": [
                    {
                        "number": 9,
                        "status": "1",
                        "locationNearList": []
                    },
                    {
                        "number": 12,
                        "status": "2",
                        "locationNearList": []
                    }
                ]
            },
            {
                "id": "daba5d40-e63b-49a6-9ec0-b7d2fc51cdd0",
                "name": "设备房环境检查",
                "startAt": "2025-08-01",
                "endAt": "2025-08-27",
                "taskNearList": [
                    {
                        "number": 5,
                        "status": "1",
                        "locationNearList": []
                    },
                    {
                        "number": 16,
                        "status": "2",
                        "locationNearList": []
                    }
                ]
            },
            {
                "id": "daba5d40-e63b-49a6-9ec0-b7d2fc51cdd0",
                "name": "1500柜门卡滞专项",
                "startAt": "2025-08-01",
                "endAt": "2025-08-27",
                "taskNearList": [
                    {
                        "number": 8,
                        "status": "1",
                        "locationNearList": []
                    },
                    {
                        "number": 12,
                        "status": "2",
                        "locationNearList": []
                    }
                ]
            }
        ],
        "taskTodayList": []
    }
    loading.value = false;
});
</script>
<style scoped>
.container {
    width: 100%;
    height: 94.5vh;
    overflow: hidden;
    position: relative;
}

.global-loading {
    position: absolute;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.loading-spinner {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    border-top-color: #409eff;
    border-bottom-color: #67c23a;
    animation: spin 1.2s ease-in-out infinite;
    position: relative;
}

.loading-spinner::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    border-top-color: #e6a23c;
    border-bottom-color: #f56c6c;
    animation: spin 0.8s ease-in-out reverse infinite;
}

.loading-text {
    color: black;
    margin-top: 20px;
    font-size: 18px;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.retry-btn {
    margin-top: 10px;
    padding: 5px 15px;
    background-color: white;
    color: #ff4d4f;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.bg-layer {
    position: absolute;
    inset: 0;
    background: url('/dashboard/images/bg.jpg') center/cover no-repeat;
    z-index: 1;
}

.image-container {
    position: absolute;
    inset: 0;
    z-index: 5;
}

.rot-layer {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    animation: rotate linear infinite;
}

.static-layer {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.rot1 {
    width: 450px;
    height: 450px;
    background-image: url('/dashboard/images/jt.png');
    animation-duration: 10s;
    animation-direction: reverse;
}

.rot2 {
    width: 500px;
    height: 500px;
    background-image: url('/dashboard/images/lbx.png');
    animation-duration: 20s;
}

.rot3 {
    width: 400px;
    height: 400px;
    background-image: url('/dashboard/images/map.png');
}

@keyframes rotate {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 768px) {
    .rot1 {
        width: 300px;
        height: 300px;
    }

    .rot2 {
        width: 350px;
        height: 350px;
    }

    .rot3 {
        width: 250px;
        height: 250px;
    }

    .loading-spinner {
        width: 50px;
        height: 50px;
    }
}
</style>
